<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{height:100%;}
        .box{
            width:80%;
            height:90%;
            background: #222;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .fire{
            width:10px;height:20px;
            position: absolute;
            bottom:0;
        }
        .s_fire{
            width:10px;height:10px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script src="../move.js"></script>
<script>

    function Fire(ops){
        // 解析参数
        this.box = ops.box;
        this.origin = ops.origin;
        this.type = ops.type;
        this.target = ops.target;
        this.className = ops.className;

        // 执行创建并插入元素
        this.create();
    }
    Fire.prototype = {
        create(){
            // 创建并插入元素
            this.ele = document.createElement("div");
            this.box.appendChild(this.ele);
            // 执行设置样式
            this.setStyle()
        },
        setStyle(){
            // 设置样式
            this.ele.className = this.className;
            this.ele.style.background = randomRGB();
            this.ele.style.left = this.origin.x + "px";
            this.ele.style.top = this.origin.y + "px";
            // 执行开始运动
            this.action();
        },
        action(){
            // 开始运动
            move(this.ele, {
                top: this.target.y,
                left: this.target.x
            },()=>{
                // 运动结束后，执行删除元素，判断当前处于烟花的哪个阶段
                // 删除元素
                this.ele.remove();
                this.end();
            })
        },
        end(){
            // 判断烟花是否是第一阶段，执行多次new Fire();
            if(this.type === 1){
                const r = random(100, 200);
                const num = random(10,20)
                for(let i=0;i<num;i++){

                    // 角度 = 360 / num * i;
                    const deg = 360 / num * i;

                    // 计算圆的任意一点
                    // 已知角度和斜边，求两个直角边的长度
                    
                    // cos = 临边 / 斜边
                    // 临边：斜边 * cos
                    // left = 半径 * Math.cos( Math.PI / 180 * 角度 )

                    // sin = 对边 / 斜边
                    // 对边：斜边 * sin
                    // top = 半径 * Math.sin( Math.PI / 180 * 角度 )

                    new Fire({
                        box: this.box,
                        type: 2,
                        origin: this.target,
                        target:{
                            x: parseInt(r * Math.cos( Math.PI / 180 * deg ) + this.target.x),
                            y: parseInt(r * Math.sin( Math.PI / 180 * deg ) + this.target.y)
                        },
                        className: "s_fire"
                    });
                }
            }
        }
    }

    const box = document.querySelector(".box");

    
    // 自动触发
    // setInterval(()=>{
    //     const x = random(0, box.offsetWidth-10);
    //     new Fire({
    //         box,
    //         type: 1,
    //         origin:{
    //             x,
    //             y: box.offsetHeight
    //         },
    //         target:{
    //             x,
    //             y: random(0, box.offsetHeight-20)
    //         },
    //         className: "fire"
    //     });
    // }, 500)

    // 点击触发
    box.onclick = function(eve){
        const e = eve || window.event;
        new Fire({
            box,
            type: 1,
            origin:{
                x: e.offsetX,
                y: box.offsetHeight
            },
            target:{
                x: e.offsetX,
                y: e.offsetY
            },
            className: "fire"
        });
    }
    
    

    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }
    function randomRGB(){
        return `rgb(${random(100,255)},${random(100,255)},${random(100,255)})`;
    }

</script>
</html>